<template>
  <div class="container">
    <div class="operation">
      <span>客户入住</span>
      <el-form :inline="true" :model="formInline" class="demo-form-inline">
        <el-form-item label="预定电话">
          <el-input v-model="formInline.accPhone" placeholder="预定电话"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="searchByPhone(formInline.accPhone)">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div class="orders">
      <div class="order">
        <div class="order-code">订单号</div>
        <div class="room-type">房间类型</div>
        <div class="inform-phone">联系电话</div>
        <div class="checkin-name">入住人姓名</div>
        <div class="checkin-identity">入住人身份证</div>
        <div class="checkin-time">入住时间</div>
        <div class="order-reverse-price">金额</div>
        <div class="order-operation">操作</div>
      </div>
      <div class="order" v-for="item in orders" :key="item.orderCode">
        <div class="order-code" :title="item.orderCode">{{ item.orderCode }}</div>
        <div class="room-type">{{ item.roomType }}</div>
        <div class="inform-phone">{{ item.informPhone }}</div>
        <div class="checkin-name">{{ item.checkinName }}</div>
        <div class="checkin-identity">{{ item.checkinIdentity }}</div>
        <div class="checkin-time">{{ item.checkinStartTime.split('T')[0] }} 到 {{ item.checkinEndTime.split('T')[0] }}</div>
        <div class="order-reverse-price">{{ item.orderReversePrice }}</div>
        <div class="order-operation">
          <el-button v-if="item.orderStatus === '已预定'" type="warning" class="order-delete" @click="reverse(item)">入住</el-button>
          <el-button v-if="item.orderStatus === '已入住'" type="primary" class="order-delete" @click="refund(item)">退房</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {AdminOrderListByReverse, AdminOrderUpdateByReverse, AdminRoomUpdateByRefund} from "@/api";

export default {
  name: "Checkin",
  data() {
    return {
      formInline: {
        accPhone: '',
        accPhoneOld: 'null'
      },
      orders: {
        
      }
    }
  },
  methods: {
    searchByPhone(phone){
      if (phone === null || phone === ""){
        phone = "null"
      }
      AdminOrderListByReverse(phone).then(res => {
        this.orders = res
        this.formInline.accPhoneOld = this.formInline.accPhone
        this.formInline.accPhone = ''

      })
    },
    reverse(order){
      AdminOrderUpdateByReverse(order.orderCode).then(res => {
        this.$notify({
          title: res.message,
          type: "success"
        })
        AdminOrderListByReverse(this.formInline.accPhoneOld).then(res => {
          this.orders = res
        })
      })
    },
    refund(order) {
      AdminRoomUpdateByRefund(order.orderCode).then(res => {
        this.$notify({
          title: res.message,
          type: "success"
        })
        AdminOrderListByReverse(this.formInline.accPhoneOld).then(res => {
          this.orders = res
        })
      })
    }
  },
  created() {
    AdminOrderListByReverse(this.formInline.accPhoneOld).then(res => {
      this.orders = res
    })
  }
}
</script>

<style scoped lang="less">
.container{
  background: #e8e6e6;
  border-radius: 8px;
  margin: 16px 128px;
  padding: 16px;
  min-width: 880px;
  .orders{;
    margin-top: 16px;
    .order{
      margin: 8px 0;
      padding: 16px 16px;
      display: flex;
      flex-direction: row;
      border: 1px solid #c7c1c1;
      border-radius: 4px;
      align-items: center;
      .order-code{
        width: 10%;
        /*强制文字在一行文本框内*/
        white-space: nowrap;
        /*溢出部分文字隐藏*/
        overflow: hidden;
        /*溢出部分省略号处理*/
        text-overflow: ellipsis;
      }
      .room-type{
        width: 10%;
      }
      .inform-phone{
        width: 10%;
      }
      .checkin-name{
        width: 10%;
      }
      .checkin-identity{
        width: 10%;
      }
      .checkin-time{
        width: 20%;
      }
      .order-reverse-price{
        width: 10%;
      }
      .order-type{
        font-weight: 600;
        width: 10%;
      }
      .order-code{
        width: 10%;
      }
      .order-fac{
        width: 30%;
        display: flex;
        flex-direction: row;
        justify-content: space-evenly;
      }
      .order-price{
        width: 20%;
        flex-grow: 1;
        color: red;
      }
      .order-operation{
        width: 20%;
        justify-content: space-evenly;
        display: flex;
        span{

        }
        .order-delete{
          border: 1px ;
        }
        .order-update{

        }
        .order-details{

        }

      }
    }
  }
  .operation{
    span{
      font-weight: 600;
      color: darkgrey;
    }
    display: flex;
    justify-content: space-between;
    margin-right: 80px;
    align-items: center;
    /deep/.el-form{
      .el-form-item{
        margin-bottom: 0;
      }

    }
  }
}
</style>